<template>
	<view class="container">
		<view class="ui-all">
			<view class="ui-list">
			    <text>{{ $t('pages.sys.profile.password') }}</text>
				<uni-easyinput type="password" v-model="changePasswordDto.OldPassword" placeholderStyle="font-size: 15px" :placeholder="$t('pages.sys.profile.passwordPlaceholder')" />
			</view>
			<view class="ui-list">
			    <text>{{ $t('pages.sys.profile.newPassword') }}</text>
				<uni-easyinput type="password" v-model="changePasswordDto.NewPassword" placeholderStyle="font-size: 15px" :placeholder="$t('pages.sys.profile.newPasswordPlaceholder')" />
			</view>
			<view class="ui-list">
			    <text>{{ $t('pages.sys.profile.confirmPassword') }}</text>
				<uni-easyinput type="password" v-model="changePasswordDto.ConfirmNewPassword" placeholderStyle="font-size: 15px" :placeholder="$t('pages.sys.profile.confirmPasswordPlaceholder')" />
			</view>
			
			<button class="button-submit" type="primary" @click="handleSubmit">{{ $t('common.submitText') }}</button>
			<button class="button-submit" type="warn" @click="clearData">{{ $t('common.resetText') }}</button>
			
		</view>
		
		<view>
			<!-- 提示信息弹窗 -->
			<uni-popup ref="message" type="message">
				<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
			</uni-popup>
		</view>
		
		<view style="margin-top: 80rpx;" />
	</view>
</template>
<script>
	import { changePassword } from '@/apis/identity';
    export default {
        data() {
            return {
				changePasswordDto: {
					OldPassword: '',
					NewPassword: '',
					ConfirmNewPassword: ''
				},
				msgType: '',
				messageText: ''
            }
        },
		async onShow() {
			const that = this;
			// 导航栏多语言
			uni.setNavigationBarTitle({
				title: that.$t('pages.sys.profile.modifyPasswordText'),
			});
		},
        methods: {
			/** 窗体提交 */
            formSubmit: function(e) {
                // console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
                // var formdata = e.detail.value
                // uni.showModal({
                //     content: '表单数据内容：' + JSON.stringify(formdata),
                //     showCancel: false
                // });
				handleSubmit();
            },
			/** 窗体重置 */
            formReset: function(e) {
				// console.log('清空数据');
				clearData();
            },
			/** 清空数据 */
			clearData() {
				const that = this;
				that.changePasswordDto.OldPassword = '';
				that.changePasswordDto.NewPassword = '';
				that.changePasswordDto.ConfirmNewPassword = '';
			},
			/** 处理提交 */
			async handleSubmit() {
				const that = this;
				if (that.changePasswordDto.OldPassword === undefined || that.changePasswordDto.OldPassword === null || that.changePasswordDto.OldPassword === '') {
					that.msgType = 'warn';
					that.messageText = that.$t('pages.sys.profile.passwordPlaceholder');
					that.$refs.message.open();
					return;
				}
				if (that.changePasswordDto.NewPassword === undefined || that.changePasswordDto.NewPassword === null || that.changePasswordDto.NewPassword === '') {
					that.msgType = 'warn';
					that.messageText = that.$t('pages.sys.profile.newPasswordPlaceholder');
					that.$refs.message.open();
					return;
				}
				if (that.changePasswordDto.ConfirmNewPassword === undefined || that.changePasswordDto.ConfirmNewPassword === null || that.changePasswordDto.ConfirmNewPassword === '') {
					that.msgType = 'warn';
					that.messageText = that.$t('pages.sys.profile.confirmPasswordPlaceholder');
					that.$refs.message.open();
					return;
				}
				if (that.changePasswordDto.NewPassword !== that.changePasswordDto.ConfirmNewPassword) {
					that.msgType = 'error';
					that.messageText = that.$t('pages.sys.profile.diffPwd');
					that.$refs.message.open();
					return;
				}
				
				try {
					uni.showLoading({
						title: that.$t('common.loadingText'),
						mask: true
					});
					
					const dto = that.changePasswordDto;
					// console.log('handleSubmit', dto);
					const result = await changePassword(dto, 'modal');
					if(result.Type !== 200){
						uni.hideLoading();
						return;
					}
					
					uni.hideLoading();
					uni.showToast({
						icon: 'success',
						title: that.$t('common.successText'),
						mask: true
					});
					
					setTimeout(function () {
					    uni.navigateBack();
					}, 1500);
				}
				catch(err) {} 
				finally {
					uni.hideLoading();
				}
			}
        }
    }
</script>

<style lang="less">
	page {
		display: flex !important;
		align-items: center !important;  
		flex-direction: column !important;
		justify-content: center !important;
		background-color: #fff !important;
	}
	
	.container {
		width: 100vw;
	}

	.ui-all {
		padding: 20rpx 40rpx;
		
		.ui-list {
			width: 100%;
			text-align: left;
			padding: 20rpx 0;
			border-bottom: solid 1px #f2f2f2;
			position: relative;

			text {
				color: #4a4a4a;
				font-size: 15px;
				display: inline-block;
				vertical-align: middle;
				min-width: 150rpx;
			}
			uni-easyinput {
				color: #030303;
				font-size: 30rpx;
				display: inline-block;
				vertical-align: middle;
			}
			button{
				color: #030303;
				font-size: 30rpx;
				display: inline-block;
				vertical-align: middle;
				background: none;
				margin: 0;
				padding: 0;
				&::after{
					display: none;
				}
			}
			picker {
				width: 90%;
				color: #030303;
				font-size: 30rpx;
				display: inline-block;
				vertical-align: middle;
				position: absolute;
				top: 30rpx;
				left: 150rpx;
			}

			textarea {
				color: #030303;
				font-size: 30rpx;
				vertical-align: middle;
				height: 150rpx;
				width: 100%;
				margin-top: 50rpx;
			}
		}

		.button-submit {
			font-size: 35rpx;
			width: 500rpx;
			height: 100rpx;
			border-radius: 50rpx;
			line-height: 100rpx;
			text-align: center;
			margin-left: auto;
			margin-right: auto;
			margin-top: 35rpx;
		}
	}
</style>
